<template>
    <div :style="{minHeight: h}" class="main">
        <header-1 class="d1" @router="router">
            <template v-slot:center>
               <span class="center">
                    满减活动
               </span>
            </template>
        </header-1>
        <bottom @router="creat">
            <template v-slot:center>
               <span>
                    创建满减活动{{arr.length}}/5
               </span>
            </template>
        </bottom>
        <div class="dd">

        </div>
        <van-tabs v-model="active" line-width="25px" line-height="4px" title-active-color="#ff6e53">
            <van-tab :title=a>
        <div class="box" v-for="(item,index) in arr1" :key="index">
           <div class="box_top">
                <div class="box_top_1">
                    <span class="box_top_2">NO.{{index+1}}</span>
                    <div class="box_top_3">
                        <span class="box_top_4">满减活动</span>
                        <span class="cor" v-for="(item,index) in item.rules" :key="index">{{item}}</span>
                        <span>活动日期: {{item.acData}}</span>
                        <span>使用方式: {{item.useType}}</span>
                        <span>其他说明: {{item.userType}}可用</span>
                        <span>创建时间: {{item.createTime}}</span>
                    </div>
                </div>
                <div class="topr" v-if="item.status == 1">
                    <img src="https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E7%AE%A1%E7%90%86/u3968.png" class="img1"  />
                    <span>进行中</span>
                </div>
                <div class="topr1" v-if="item.status == 2">
                    <img src="https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E7%AE%A1%E7%90%86/u3968.png" class="img1" />
                    <span>未开始</span>
                </div>
                <div class="topr2" v-if="item.status == 3">
                    <img src="https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E7%AE%A1%E7%90%86/u3968.png" class="img1" />
                    <span>已暂停</span>
                </div>
                <div class="topr3" v-if="item.status == 4">
                    <img src="https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E7%AE%A1%E7%90%86/u3968.png" class="img1" />
                    <span>已结束</span>
                </div>
           </div>
           <div class="box_bottom">
            <div><span v-if="item.astatus == 1" @click="item.astatus = 2">暂停发放</span><span v-if="item.astatus == 2" @click="item.astatus=1">恢复发放</span></div>
            <div @click="chakan" v-if="item.status == 4">使用详情</div>
            <div @click="bianji(item)" v-else>编辑活动</div>
           </div>
        </div>
            </van-tab>
            <van-tab title="全部活动">
                
        <div class="box" v-for="(item,index) in arr" :key="index">
           <div class="box_top">
                <div class="box_top_1">
                    <span class="box_top_2">NO.{{index+1}}</span>
                    <div class="box_top_3">
                        <span class="box_top_4">满减活动</span>
                        <span class="cor" v-for="(item,index) in item.rules" :key="index">{{item}}</span>
                        <span>活动日期: {{item.acData}}</span>
                        <span>使用方式: {{item.useType}}</span>
                        <span>其他说明: {{item.userType}}可用</span>
                        <span>创建时间: {{item.createTime}}</span>
                    </div>
                </div>
                <div class="topr" v-if="item.status == 1">
                    <img src="https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E7%AE%A1%E7%90%86/u3968.png" class="img1" />
                    <span>进行中</span>
                </div>
                <div class="topr1" v-if="item.status == 2">
                    <img src="https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E7%AE%A1%E7%90%86/u3968.png" class="img1" />
                    <span>未开始</span>
                </div>
                <div class="topr2" v-if="item.status == 3">
                    <img src="https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E7%AE%A1%E7%90%86/u3968.png" class="img1" />
                    <span>已暂停</span>
                </div>
                <div class="topr3" v-if="item.status == 4">
                    <img src="https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E7%AE%A1%E7%90%86/u3968.png" class="img1" />
                    <span>已结束</span>
                </div>
           </div>
           <div class="box_bottom">
            <div><span v-if="item.astatus == 1" @click="item.astatus = 2">暂停发放</span><span v-if="item.astatus == 2" @click="item.astatus=1">恢复发放</span></div>
            <div @click="chakan" v-if="item.status == 4">使用详情</div>
            <div @click="bianji(item)" v-else>编辑活动</div>
           </div>
        </div>
            </van-tab>
        </van-tabs>
        <div class="kl">

        </div>

    </div>
</template>
<script>
import header1 from '../../components/BS/header2View.vue'
import bottom from '../../components/BS/BottomView.vue'
import { mj} from '../../https/MaRk'
export default {
    components:{
        header1,
        bottom
    },
    data(){
        return{
            a:'',
            h:'',
            active:1,
            arr:'',
            arr1:''
        }
    },
    created(){
        this.h = window.innerHeight + 'px'
        mj().then(res =>{
            console.log(res);
            res.data.data.forEach(item =>{
                if(item.userType == 1){
                    item.userType = '店铺所有用户'
                }
                if(item.userType == 2){
                    item.userType = '店铺新用户'
                }
            })
            this.arr = res.data.data
            this.arr.forEach(item => {
               item.rules = item.rules.split(','); 
            });
            this.arr1 = this.arr.filter(item =>{
                   return item.status == 1
                })
            this.a = '进行中'+'('+this.arr1.length+')'
    }).catch(err =>{
            console.log(err);
        })
},
    methods:{
        router(){
            this.$router.push('/okavi6')
        },
        creat(){
            this.$router.push('/okavi12')
        },
        bianji(item){
            this.$router.push({ path: '/okavi13', query: { name: item } });
        },
        chakan(){
            this.$router.push('/okavi14')
        }
    }
}
</script>
<style scoped>
.main{
    background-color: #f5f5f5;
}
.d1{
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
}
.box{
    width: 90%;
    margin: 20px auto;
}
.box_top{
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 15px;
    display: flex;
    position: relative;
}
.box_bottom{
    border-radius: 15px;
    width: 100%;
    height: 40px;
    margin-top: 1px;
    background-color: #FFFFFF;
    display: flex;
    font-size: 15px;
    color: #ff6e53;
    justify-content: space-around;
    align-items: center;
}
.box_top_1{
    display: flex;
    width: 90%;
    height: 100%;
    margin: 10px auto;
}
.box_top_2{
    font-size: 15px;
    color: #797979;
    margin-top: 6px;
}
.box_top_3{
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: #fb8974;
    margin-left: 10px;
}
.box_top_3 span{
    margin: 5px;
}
.box_top_4{
    font-size: 15px;
    color: #ff6e53;
    margin-bottom: 5px;
}
.topr{
    font-size: 15px;
    width: 75px;
    height: 20px;
    background-color: #0066cc;
    border-radius: 30px;
    color: #ffffff;
    text-align: center;
    position: absolute;
    top: 15px;
    right: 10px;
}
.img1{
    margin-right: 5px;
}
.img2{
    display: inline-flex;
    margin: 50px auto;
}
.ing{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 150px auto;
}
.dd{
    width: 100%;
    height: 50px;
}
.kl{
    width: 100%;
    height: 70px;
}
.cor{
    color: #cc0000;
}
.topr1{
    font-size: 15px;
    width: 75px;
    height: 20px;
    background-color: #52beed;
    border-radius: 30px;
    color: #ffffff;
    text-align: center;
    position: absolute;
    top: 15px;
    right: 10px;
}
.topr2{
    font-size: 15px;
    width: 75px;
    height: 20px;
    background-color: #fb8974;
    border-radius: 30px;
    color: #ffffff;
    text-align: center;
    position: absolute;
    top: 15px;
    right: 10px;
}
.topr3{
    font-size: 15px;
    width: 75px;
    height: 20px;
    background-color: #cccccc;
    border-radius: 30px;
    color: #ffffff;
    text-align: center;
    position: absolute;
    top: 15px;
    right: 10px;
}
</style>